<template>
    <div class="fictionClass">
        <div class="item"
        @click="toPath(item)"
        v-for="(item, index) in list" :key="index"
        >
            <van-image :src="item.image" width="100%" height="116px">
                <template v-slot:error>
                    <van-image src="http://www.fyhuabo.com/images/nopic.gif" height="116px" width="100%"></van-image>
                </template>
            </van-image>
            <div class="title">{{ item.fictionClassName }}</div>
        </div>
        <LoadAnimation :load="Load"/>
    </div>
</template>

<script>
    import { getFictionClassList } from '@/api/fictionClass'
    export default {
        data() {
            return {
                list : [],
                Load : false
            }
        },
        created() {
            this.getData()
        },
        methods: {
            getData(){
                this.Load = true
                getFictionClassList().then(res => {
                    this.Load = false
                    if(res.code == 200){
                        this.list = res.data
                    }
                })
            },
            toPath(item){
                this.$router.push('/fictionList?cid=' + item.fictionClassId + '&title=' + item.fictionClassName)
            }
        },
    }
</script>

<style scoped>
.fictionClass{
    padding: 5px;
    width: calc(100% - 10px);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.item{
    width: calc(25% - 4px);
    overflow: hidden;
    margin: 2px;
}
.title{
    width: 100%;
    text-align: center;
    /* background-color: #fff; */
    height: 25px;
    line-height: 25px;
}
</style>